<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeCraft - 数字工具创意平台</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6', // 主色调：亮蓝色（技术感+包容性）
            python: '#3776AB', // Python专属色
            java: '#007396',   // Java专属色
            mysql: '#00758F',  // MySQL专属色
            excel: '#217346',  // Excel专属色
            web: '#F06292',    // 前端专属色
            neutral: '#F8FAFC', // 中性背景色
            dark: '#1E293B',   // 深色文本
            notice: '#FF6B35', // 公告强调色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
      .tech-card-active {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
      }
      .notice-item-hover {
        transition: all 0.2s ease;
      }
      .notice-item-hover:hover {
        background-color: rgba(59, 130, 246, 0.03);
        transform: translateX(4px);
      }
      .feature-card {
        transition: all 0.3s ease;
      }
      .feature-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
      }
    }
  </style>
</head>

<body class="bg-white text-dark">
  <!-- 导航栏 - 第一行 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-blue-400 flex items-center justify-center">
          <i class="fa fa-cube text-white text-xl"></i>
        </div>
        <span class="text-xl font-bold bg-gradient-to-r from-primary to-blue-500 text-gradient">CodeCraft</span>
      </a>

      <!-- 导航菜单 - 桌面端 -->
      <nav class="hidden md:flex items-center gap-8">
        <a href="#" class="font-medium text-primary border-b-2 border-primary pb-1">首页</a>
        <a href="#services" class="font-medium hover:text-primary transition-colors">核心服务</a>
        <a href="#tech" class="font-medium hover:text-primary transition-colors">技术领域</a>
        <a href="#tools" class="font-medium hover:text-primary transition-colors">工具商城</a>
        <a href="#creative" class="font-medium hover:text-primary transition-colors">创意对接</a>
        <a href="#about" class="font-medium hover:text-primary transition-colors">关于我们</a>
      </nav>

      <!-- 登录/注册按钮 -->
      <div class="flex items-center gap-4">
        <a href="#login" class="hidden md:block px-4 py-2 text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">登录</a>
        <a href="#register" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">免费加入</a>

        <!-- 移动端菜单按钮 -->
        <button id="menuBtn" class="md:hidden text-dark text-xl">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
  </header>


  <!-- 交互脚本 -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('py-2', 'shadow');
        navbar.classList.remove('py-3');
      } else {
        navbar.classList.add('py-3');
        navbar.classList.remove('py-2', 'shadow');
      }
    });

    // 移动端菜单切换
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      menuBtn.innerHTML = mobileMenu.classList.contains('hidden')
        ? '<i class="fa fa-bars"></i>'
        : '<i class="fa fa-times"></i>';
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;

        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });

          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
            menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
          }
        }
      });
    });
  </script>
</body>
</html>
